<template>
    <div class="vp-raw">
        <ElEditTable v-model:data="data" ref="myTable" :is-edit="true">
            <ElEditTableColumn label="ID" prop="id" :is="ElInput" :rules="idRules"></ElEditTableColumn>
            <ElEditTableColumn label="性别" prop="gender" :is="ElSelect" :data="selectData" optionLabel="label"
                optionValue="value" :rules="genderRules">
            </ElEditTableColumn>
        </ElEditTable>

        <ElButton @click="save" type="primary">保存</ElButton>
    </div>
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import { ElEditTable, ElEditTableColumn } from "@howuse/element-plus-edit-table"
import { ElInput, ElSelect, ElButton } from "element-plus"
import { ref, unref } from 'vue';

const myTable = ref();

const idRules = [
    { required: true, message: '请输入ID', trigger: 'change' }
]
const genderRules = [
    { required: true, message: '请选择性别', trigger: 'change' }
]

const selectData = [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]

const data = ref([
    { id: 11, gender: 1 },
])

function save() {
    unref(myTable).validate().then(() => {
        alert(JSON.stringify(unref(data)))
    })
}
</script>
<style scoped></style>